
@prefixCls: ym-staff-choice;
@primaryColor: #f66e2c;
@import url('./choiceList.less');
@import url('./crumbList.less');
@import url('./selected.less');

.@{prefixCls} {
  // width: 668px;
  display: flex;
  flex-flow: row nowrap;
  &-left {
    flex: 0 0 320px;
    height: 440px;
    overflow: hidden;
    background: #f8f8f8;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    &-flag {
      line-height: 32px;
      color: #333;
      font-size: 14px;
    }
    &-search {
      margin-top: 4px;
    }
    &-tabs {
      position: relative;
      &::after {
        position: absolute;
        content: '';
        left: -12px;
        right: -12px;
        bottom: 0 px;
        height: 1px;
        background-color: rgba(0, 0, 0, 6%);
      }
    }
    &-content {
      flex: auto;
      overflow: hidden;
      .content-section {
        height: 100%;
        box-sizing: border-box;
        display: none;
        &.active {
          display: block;
        }
      }
    }
  }
  &-center {
    flex: 0 0 28px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    &-arrow {
      font-size: 12px;
      color: #ccc;
    }
  }
  &-right {
    flex: 0 0 320px;
    height: 440px;
    overflow-y: auto;
    background: #f8f8f8;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex;
    flex-direction: column;
    &-flag {
      line-height: 32px;
      color: #333;
      font-size: 14px;
    }
    &-selected {
      flex: auto;
      overflow-y: auto;
    }
  }
}
